<div class="main-container">
    <div class="search-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
                <nz-form-label>物资类型</nz-form-label>
                <nz-form-control>
                    <nz-select formControlName="suppliesType" nzAllowClear nzPlaceHolder="物资类型">
                        <nz-option *ngFor="let item of materialTypeList"
                                   [nzLabel]="item.label"
                                   [nzValue]="item.value">
                        </nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>存放地点</nz-form-label>
                <nz-form-control>
                    <input formControlName="strorageLocation" nz-input placeholder="存放地点"/>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>物资状态</nz-form-label>
                <nz-form-control>
                    <nz-select formControlName="suppliesStatus" nzAllowClear nzPlaceHolder="物资状态">
                        <nz-option nzLabel="库存充足" nzValue="1"></nz-option>
                        <nz-option nzLabel="库存不足" nzValue="2"></nz-option>
                        <nz-option nzLabel="不可用" nzValue="3"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="queryInfo(true)"><i nz-icon nzType="search"></i>查询
                    </button>
                </nz-form-control>
            </nz-form-item>
        </form>
        <button nz-button nzType="danger" class="add-btn" (click)="openEditModal()">
            <i nz-icon nzType="plus" nzTheme="outline"></i>新增
        </button>
    </div>

    <div class="main-wrap">
        <nz-table #dataTable
                  class="main-table"
                  [nzData]="tableData"
                  [nzTotal]="total"
                  [nzFrontPagination]="false"
                  [(nzPageIndex)]="pageNum"
                  [(nzPageSize)]="pageSize"
                  [nzLoading]="loading"
                  (nzPageIndexChange)="queryInfo()"
                  nzBordered
                  nzSize="middle">
            <thead>
            <tr>
                <th>编号</th>
                <th>物资名称</th>
                <th>存放地点</th>
                <th>物资描述</th>
                <th>联系人</th>
                <th>物资类型</th>
                <th>物资状态</th>
                <th>领用人</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of dataTable.data">
                <td>{{data.suppliesCode}}</td>
                <td>{{data.suppliesName}}</td>
                <td>{{data.strorageLocation}}</td>
                <td>{{data.suppliesInfo}}</td>
                <td>{{data.contact}}</td>
                <td>
                    <div *ngIf="data.suppliesType===1">普通维修</div>
                    <div *ngIf="data.suppliesType===2">更新改造</div>
                    <div *ngIf="data.suppliesType===3">新建</div>
                    <div *ngIf="data.suppliesType===4">涉外工程</div>
                </td>
                <td>
                    <div *ngIf="data.suppliesStatus===1">库存充足</div>
                    <div *ngIf="data.suppliesStatus===2">库存不足</div>
                    <div *ngIf="data.suppliesStatus===3">不可用</div>
                </td>
                <td>{{data.employer}}</td>
                <td>{{data.remarks}}</td>
                <td>
                    <a (click)="openEditModal(false, data)">详情</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a (click)="openEditModal(true, data)">编辑</a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                       (nzOnConfirm)="onDelete(data.id)">
                        删除
                    </a>
                </td>
            </tr>
            </tbody>
        </nz-table>
    </div>

    <nz-modal nzClassName="custom-modal pm-flood-modal" nzWidth="760" [nzFooter]="queryType" [(nzVisible)]="modalShow"
              [nzTitle]="modalTitle"
              (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
        <form nz-form [formGroup]="form">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">编号</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="suppliesCode" placeholder="编号">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">物资名称</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="suppliesName" placeholder="物资名称">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">物资类型</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-select formControlName="suppliesType" nzPlaceHolder="物资类型">
                                <nz-option *ngFor="let item of materialTypeList"
                                           [nzLabel]="item.label"
                                           [nzValue]="item.value">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">存放地点</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="strorageLocation" placeholder="存放地点">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">物资描述</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="suppliesInfo" placeholder="物资描述">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">联系人</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="contact" placeholder="联系人">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">物资状态</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-select formControlName="suppliesStatus" nzAllowClear nzPlaceHolder="物资状态">
                                                        <nz-option nzLabel="库存充足" nzValue="1"></nz-option>
                                                        <nz-option nzLabel="库存不足" nzValue="2"></nz-option>
                                                        <nz-option nzLabel="不可用" nzValue="3"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">领用人</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="employer" placeholder="领用人">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="24">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="3">备注</nz-form-label>
                        <nz-form-control [nzSpan]="20">
                            <textarea formControlName="remarks" nz-input rows="2"></textarea>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </nz-modal>

</div>
